import {createRouter, createWebHistory} from 'vue-router'
import i18n from '../lang/i18n.ts'
import {useStore} from "vuex";

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        {
            path: '/',
            name: 'index',
            component: () => import('../views/index/index.vue'),
            meta: {title: i18n.global.t('title.index')}
        },
        {
            name: 'login', path: '/login',
            component: () => import('../views/mine/login.vue'),
            meta: {title: i18n.global.t('title.login')}
        },
        {
            name: 'register', path: '/register',
            component: () => import('../views/mine/register.vue'),
            meta: {title: i18n.global.t('title.register')}
        },
        {
            name: 'mine', path: '/mine',
            component: () => import('../views/mine/mine.vue'),
            meta: {title: i18n.global.t('title.mine')}
        },
        {
            name: 'policy', path: '/policy',
            component: () => import('../views/mine/policy.vue'),
            meta: {title: i18n.global.t('title.policy')}
        },
        {
            name: 'recharge', path: '/recharge',
            component: () => import('../views/mine/recharge.vue'),
            meta: {title: i18n.global.t('title.recharge')}
        },
        {
            name: 'withdraw', path: '/withdraw/:type',
            component: () => import('../views/mine/withdraw.vue'),
            meta: {title: i18n.global.t('title.withdraw')}
        },
        {
            name: 'bindCardExcess', path: '/bindCardExcess',
            component: () => import('../views/mine/bindCardExcess.vue'),
            meta: {title: i18n.global.t('title.withdraw')}
        },
        {
            name: 'bindCard', path: '/bindCard',
            component: () => import('../views/mine/bindCard.vue'),
            meta: {title: i18n.global.t('title.bindBandCard')}
        },
        {
            name: 'bindUsdt', path: '/bindUsdt',
            component: () => import('../views/mine/bindUsdt.vue'),
            meta: {title: i18n.global.t('title.bindUsdt')}
        },
        {
            name: 'rixibao', path: '/rixibao',
            component: () => import('../views/mine/rixibao.vue'),
            meta: {title: i18n.global.t('title.rixibao')}
        },
        {
            name: 'record', path: '/record',
            component: () => import('../views/mine/record.vue'),
            meta: {title: i18n.global.t('title.record')}
        },
        {
            name: 'order', path: '/order',
            component: () => import('../views/mine/order.vue'),
            meta: {title: i18n.global.t('title.order')}
        },
        {
            name: 'newsDetail', path: '/newsDetail/:id',
            component: () => import('../views/news/detail.vue'),
            meta: {title: i18n.global.t('title.newsDetail')}
        },
        {
            name: 'product', path: '/product',
            component: () => import('../views/product/index.vue'),
            meta: {title: i18n.global.t('title.product')}
        },
        {
            name: 'productDetail', path: '/product/detail/:id',
            component: () => import('../views/product/detail.vue')
        },
        {
            name: 'editPassword', path: '/editPassword',
            component: () => import('../views/mine/editPassword.vue'),
            meta: {title: i18n.global.t('title.editPassword')}
        },
        {
            name: 'editPayPassword', path: '/editPayPassword',
            component: () => import('../views/mine/editPayPassword.vue'),
            meta: {title: i18n.global.t('title.editPayPassword')}
        },
        {
            name: 'auth', path: '/auth',
            component: () => import('../views/mine/auth.vue'),
            meta: {title: i18n.global.t('title.auth')}
        },
        {
            name: 'service', path: '/service',
            component: () => import('../views/mine/service.vue'),
            meta: {title: i18n.global.t('title.service')}
        }
    ],
})

// 前置路由守卫 (beforeEach)
router.beforeEach((to, from, next) => {

    const store = useStore();

    //设置导航内容
    store.commit('switchNavbarTitle', to.meta.title || '');

    //切换底部导航选中名字
    store.commit('switchTabbarActionName', to.name || 'index');

    //切换导航显示状态
    store.commit('switchNavbarState', true);
    store.commit('switchTabbarState', true);

    if (
        to.name == 'login' || to.name == 'register' || to.name == 'auth' ||
        to.name == 'policy' || to.name == 'bindCardExcess' || to.name == 'bindCard' ||
        to.name == 'productDetail' || to.name == 'order' || to.name == 'bindUsdt' || to.name == 'withdraw'
    ) {
        store.commit('switchTabbarState', false);
    }

    //切换导航样式
    if (to.name == 'index' || to.name == 'mine' || to.name == 'record' || to.name == 'service' || to.name == 'product') {
        store.commit('switchNavbarType', 'firstPage');
    } else if (to.name == 'login' || to.name == 'register') {
        store.commit('switchNavbarType', null);
    } else {
        store.commit('switchNavbarType', 'childPage');
    }

    // 获取视口宽度
    const screenWidth:number = window.innerWidth;
    // 判断当前路由切换body颜色
    if (to.name == 'index' || to.name == 'mine' || to.name == 'product' || to.name == 'order') {
        document.body.style.backgroundColor = '#EFEFEF';
    } else if(to.name == 'productDetail'){
        if (screenWidth > 750) {
            document.body.style.maxWidth = '100%';
        }
        document.body.style.backgroundColor = '#212129';
    }else {
        // 恢复为默认背景色
        document.body.style.backgroundColor = '#ffffff';
    }

    if (to.name != 'login' && to.name != 'register' && to.name != 'index' && to.name !='service' && !localStorage.getItem('token')) {
        // 如果用户未登录并试图访问非登录页面，重定向到登录页面
        next({name: 'login'})
    } else {
        // 允许路由继续
        next()
    }
})

// 后置路由守卫 (afterEach)
router.afterEach((to, from) => {
    window.scrollTo(0, 0);
})


export default router
